<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!--先加载css样式，css样式写在style标签里-->
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            background-image: url("img/bg1.jpg");
        }

        .box {
            width: 900px;
            height: 500px;
            border: 8px solid #ccc;
            background-color: white;
            margin: auto;
        }

        .left {
            float: left;
            width: 25%;
            height: 100%;
            padding: 15px;
        }

        .center {
            float: left;
            width: 50%;
            height: 100%;
            padding: 15px;
        }

        .right {
            width: 25%;
            float: left;
            height: 100%;
            text-align: right;
            padding: 15px;
        }

        .regzh {
            color: orange;
            font-size: 18px;
        }

        .regen {
            color: #999;
            font-size: 18px;
        }

        a {
            color: pink;
            text-decoration: none;
        }

        .tb {
            width: 100%;
        }

        td {
            padding: 8px;
        }

        .label {
            width: 100px;
            text-align: right;
            font-size: 14px;
        }

        .inputItem {
            width: 250px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .smallInput {
            width: 120px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

    </style>

</head>
<body>
<!--使用块元素和内联元素，div和span都不会对标签内容做任何的修饰，都是配合css实现样式修饰和页面布局的，span通常用于文本信息的显示，div通常用于非文本信息的显示-->
<div class="box">
    <div class="left">
        <span class="regzh">新用户注册</span><br>
        <span class="regen">USER REGISTER</span>
    </div>
    <div class="center">
        <form action="#">
            <table class="tb">
                <tr>
                    <td class="label">用户名</td>
                    <td colspan="2">
                        <input type="text" name="username" class="inputItem">
                    </td>
                </tr>
                <tr>
                    <td class="label">密码</td>
                    <td colspan="2">
                        <input type="text" name="password" class="inputItem">
                    </td>
                </tr>
                <tr>
                    <td class="label">Email</td>
                    <td colspan="2">
                        <input type="text" name="email" class="inputItem">
                    </td>
                </tr>
                <tr>
                    <td class="label">姓名</td>
                    <td colspan="2">
                        <input type="text" name="name" class="inputItem">
                    </td>
                </tr>
                <tr>
                    <td class="label">手机号</td>
                    <td colspan="2">
                        <input type="text" name="tel" class="inputItem">
                    </td>
                </tr>
                <tr>
                    <td class="label">性别</td>
                    <td colspan="2">
                        <input type="radio" name="sex" value="male">男
                        <input type="radio" name="sex" value="female">女
                    </td>
                </tr>
                <tr>
                    <td class="label">生日</td>
                    <td colspan="2">
                        <input type="date" name="birthday" class="inputItem">
                    </td>
                </tr>
                <tr>
                    <td class="label">验证码</td>
                    <td>
                        <input type="text" name="checkcode" class="smallInput">
                    </td>
                    <td>
                        <input type="image" src="img/btn.jpg">
                    </td>
                    <td></td>
                </tr>
            </table>
        </form>
    </div>
    <div class="right">
        <span>已有账号？</span>
        <span><a href="#">立即登录</a></span>
    </div>
</div>
</body>
</html>